<template>
	<div class="bindNewPhone">
		<HeaderTop :title="`绑定新手机`"></HeaderTop>
        <div class="reminds-fonts">*在此可绑定新手机号码</div>
		<div class="input-area">
            <div class="input-box">
                <van-field v-model="newPhone" type="text" label="新手机号码：" maxlength='11' placeholder='请输入新手机号码'/>
            </div>
        </div>
        <van-button id="btnCover" color="#00459E" @click="confirm()" block round>提交</van-button>
	</div>
</template>

<script>
import HeaderTop from '../../components/top/top'
import {Toast} from 'vant'
export default {
	name: 'bindNewPhone',
	components: {
		HeaderTop,
	},
	data() {
		return {
            newPhone:'',
            vCode:'',
		}
	},
     beforeRouteLeave (to, from, next) {    
        sessionStorage.removeItem('userPhone')
		this.$destroy(true)
		next()
	},
	mounted() {
        if(sessionStorage.getItem('userPhone')){
            this.oldPhone = sessionStorage.getItem('userPhone')
        }
	},
	methods: {
		confirm(){
            let params = {
				phone: this.newPhone
			}
			this.ServerAPI.postAPI(this.API.subInfo, params, (success,data)=>{
				if(success){
					if(data.code === '0000'){
						Toast.success('绑定成功')
					}else{
						Toast.fail(data.info)
					}
				}else{
					Toast.fail(data.info)
				}
			})
        },
	}
}
</script>

<style lang="scss" scoped>
.bindNewPhone {
    .reminds-fonts {
		color: rgb(254,121,33);
        margin-top: .2rem;
        padding: 0 .2rem;
	}
    .input-area {
		// width: 94%;
		margin: .3rem auto 0;
		position: relative;
        .input-box {
            border-bottom: #D7D7D7 1px solid;
        }
        .input-box2 {
            margin-top: .15rem;
            position: relative;
            .code-btn {
                position: absolute;
                bottom:0;
                right:0;
                margin: 0 16px 10px 0;
            }
        }
		
	}
}

</style>
